<template>
  <div class="wrapper" ref="wrapper">
      <div class="content">
      <slot>
            
      </slot>
      </div>
  </div>
</template>

<script>
import BSfault from 'better-scroll'
export default {
    name:"Scroll",
    props:{
        probeType:{
            type:Number,
            default:0
        },
        pullUpLoad:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return{
            scroll:null,
        }
    },
    mounted(){
        const options={
             click: true,
             probeType:this.probeType,
             pullUpLoad:this.pullUpLoad,

            //  防止图片加载过慢导致窗口过小卡bug
            // observeDom开启对 content 以及 content 子元素 DOM 改变的探测。当插件被使用后，当这些 DOM 元素发生变化时，将会触发 scroll 的 refresh 方法。 observe-dom 插件具有以下几个特性：
             observeDom:true,
            // observeImage开启对 wrapper 子元素中图片元素的加载的探测。无论图片的加载成功与否，都会自动调用 BetterScroll 的 refresh 方法来重新计算可滚动的宽度或者高度，新增于 v2.1.0 版本。
             observeImage:true

        }
        this.scroll=new BSfault(this.$refs.wrapper,options)

        // 监听滚动位置
        if(this.probeType===2 || this.probeType===3){
        this.scroll.on('scroll',(position) => {
            // console.log(position);
            this.$emit('scroll',position)
        })}

        // 下拉加载更多
        this.scroll.on('pullingUp',()=>{
            // console.log('下拉加载更多');
            this.$emit('pullingup')
        })

    },
    methods:{
        scrollTo(x,y,time){
            this.scroll.scrollTo(x,y,time)
            // 消除了莫名回弹顶部的bug，需要理解一下
            this.scroll.refresh()
        },
        finishPullUp_m(){
            this.scroll.finishPullUp()
            this.scroll.refresh()
        }
    }
}
</script>

<style>

</style>